<template>
    <div id="goodsDetail">
        <div class="header">
            <van-nav-bar title="不凡" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="swiper">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item,index) in gallery" :key="index">
                    <img :src="item.img_url" alt />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="swiper-b">
            <div class="item">30天无忧退货</div>
            <div class="item">48小时快速退款</div>
            <div class="item">满88元免邮费</div>
        </div>
        <div class="goods-info">
            <div class="title">
                <p>{{info.name}}</p>
                <p>{{info.goods_brief}}</p>
                <p>￥{{info.retail_price}}</p>
            </div>
        </div>
        <div class="section-nav">
            <van-cell title="请选择规格数量" is-link />
        </div>
        <div class="attribute">
            <div class="head">商品参数</div>
            <div class="item" v-for="(item,index) in attribute" :key="index">
                <div>{{item.name}}</div>
                <div>￥{{item.value}}</div>
            </div>
        </div>
        <div class="desc" v-html="goods_desc"></div>
        <div class="common-problem">
            <div class="cp-title">
                <p>常见问题</p>
            </div>
            <div class="cp-content">
                <div class="item" v-for="(item,index) in issueList" :key="index">
                    <div class="i-question">
                        <div class="spot"></div>
                        <div class="question">{{item.question}}</div>
                    </div>
                    <div class="answer">{{item.answer}}</div>
                </div>
            </div>
        </div>
        <div class="we-watch">
            <div class="w-title">
                <p>大家都在看</p>
            </div>
            <div class="sublist">
                <div
                    class="s-item"
                    @click="go(subitem.id)"
                    v-for="(subitem,subindex) in productList"
                    replace
                    :key="subindex"
                >
                    <img :src="subitem.list_pic_url" alt />
                    <p>{{subitem.name}}</p>
                    <p>￥{{subitem.retail_price}}</p>
                </div>
            </div>
        </div>
        <van-goods-action>
            <van-goods-action-icon icon="cart-o" text="购物车" :badge='allnumber' @click="toCart" />
            <van-goods-action-icon @click="collect" v-if="collected" icon="star-o" color="#ff5000" />
            <van-goods-action-icon @click="collect" v-else icon="star-o" />
            <van-goods-action-button @click="addCar" type="warning" text="加入购物车" />
            <van-goods-action-button @click="buy" type="danger" text="立即购买" />
        </van-goods-action>
        <van-popup v-model="show" round position="bottom" :style="{ height: '40%' }">
            <div class="top">
                <div class="left">
                    <img :src="info.primary_pic_url" alt />
                </div>
                <div class="right">
                    <div>
                        <p class="r-price">价格￥{{info.retail_price}}</p>
                        <p>请选择数量</p>
                    </div>
                </div>
            </div>
            <div class="down">
                <p>数量</p>
                <van-stepper v-model="number" />
            </div>
        </van-popup>
    </div>
</template>

<script>
import { detailaction } from "@/api/category/goods";
import { addcollect } from "@/api/collect";
import { deleteAction, cartList, addCart } from "@/api/cart";
import { submitAction } from '@/api/order'
import { Toast } from "vant";
export default {
    data() {
        return {
            id: "",
            openId: "",
            gallery: [],
            info: "",
            attribute: [],
            goods_desc: [],
            issueList: [],
            productList: [],
            goodsId: "",
            collected: "",
            show: false,
            number: 0,
            total: 0,
            allnumber: 0,
            allPrise:0,
        };
    },
    computed: {},
    created() {},
    mounted() {
        console.log(this.$route.query.id);
        this.id = this.$route.query.id;
        this.openId = localStorage.getItem("openId");
        console.log(this.openId);
        this.goodsDetails();
    },
    methods: {
        onClickLeft(id) {
            this.$router.go(-1);
        },
        async goodsDetails() {
            let data = await detailaction({
                id: this.id,
                openId: this.openId,
            });
            console.log(data);
            this.gallery = data.gallery;
            this.info = data.info;
            this.attribute = data.attribute;
            this.goods_desc = data.info.goods_desc;
            this.issueList = data.issue;
            this.productList = data.productList;
            this.goodsId = data.info.id;
            this.collected = data.collected;
            this.allnumber = data.allnumber;
            this.allPrise = data.info.retail_price;
        },
        go(id) {
            //同页面跳转 用replace
            this.$router.replace(`/pages/goods?id=${id}`);
            window.location.reload();
        },
        async collect() {
            if (this.openId) {
                const data = await addcollect({
                    goodsId: this.goodsId,
                    openId: this.openId,
                });
                console.log(data);
                this.collected = !this.collected;
            }
        },
        async addCar() {
            if (this.show) {
                const data = await addCart({
                    goodsId: this.goodsId,
                    number: this.number,
                    openId: this.openId,
                });
                console.log(data);
                //添加成功后
                if (data) {
                    this.total = this.total + this.number;
                    Toast({
                        message: "添加购物车成功",
                        icon: "success",
                        duration: 2000,
                    });
                }
            } else {
                this.show = true;
                return;
            }
        },
        async buy() {
            if(this.show){
                const data = await submitAction({
                    allPrise:this.allPrise,
                    goodsId:this.goodsId,
                    openId:this.openId,
                });
                console.log(data);
            }else{
                this.show = true;
                return
            }
            
        },
        async toCart(){
            this.$router.push('/cart')
        }
    },
};
</script>

<style  lang="scss">
#goodsDetail {
    border-top: 1px solid transparent;
    background: #f4f4f4;
    font-size: 0.32rem;
    padding-bottom: 1.333333rem;
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    .swiper {
        padding-top: 1.226667rem;
        width: 10rem;
        height: 10rem;
        position: relative;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .swiper-b {
        width: 9.46667rem;
        height: 0.97333rem;
        margin: 0 auto;
        background: #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item {
            background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png)
                0 no-repeat;
            background-size: 0.13333rem;
            padding-left: 0.2rem;
            display: flex;
            align-items: center;
            font-size: 0.33333rem;
            color: #666;
        }
    }
    .goods-info {
        width: 10rem;
        height: 4.08rem;
        background: #fff;
        margin: 0 auto;
        border-bottom: 0.01333rem solid #f4f4f4;
        .title {
            height: 100%;
            p {
                display: block;
                text-align: center;
            }
            :first-child {
                font-size: 0.54667rem;
                padding: 0.26667rem;
            }
            :nth-child(2) {
                margin-bottom: 0.33333rem;
                font-size: 0.32rem;
                color: #999;
            }
            :nth-child(3) {
                margin-top: 0.13333rem;
                font-size: 0.46667rem;
                color: #b4282d;
            }
        }
    }
    .section-nav {
        margin-bottom: 0.26667rem;
    }
    .attribute {
        padding: 0.26667rem 0.4rem;
        background: #fff;
        margin-bottom: 0.26667rem;
        .head {
            font-size: 0.50667rem;
            padding: 0.26667rem 0;
            text-align: left;
        }
        .item {
            display: flex;
            background: #f7f7f7;
            padding: 0.26667rem 0;
            margin: 0.26667rem;
            :nth-child(1) {
                width: 1.78667rem;
                font-size: 0.33333rem;
                color: #999;
                text-align: left;
            }
            :nth-child(2) {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
    .desc {
        width: 100%;
        p {
            margin: 0;
            padding: 0;
            img {
                display: block;
                width: 100%;
            }
        }
    }
    .common-problem {
        margin-bottom: 1.46667rem;
        .cp-title {
            padding: 0.46667rem 0;
            background: #fff;
            text-align: center;
            p {
                margin: 0;
            }
        }
        .cp-content {
            padding: 0 0.4rem;
            background: #fff;
            .item {
                padding-bottom: 0.33333rem;
                .i-question {
                    display: flex;
                    .spot {
                        height: 0.10667rem;
                        width: 0.10667rem;
                        background: #b4282d;
                        border-radius: 50%;
                        margin-top: 0.14667rem;
                    }
                    .question {
                        line-height: 0.4rem;
                        padding-left: 0.10667rem;
                        display: block;
                        font-size: 0.34667rem;
                        padding-bottom: 0.2rem;
                        color: #303030;
                    }
                }
                .answer {
                    line-height: 0.53333rem;
                    padding-left: 0.21333rem;
                    font-size: 0.34667rem;
                    color: #787878;
                    text-align: left;
                }
            }
        }
    }
    .we-watch {
        .w-title {
            padding: 0.46667rem 0;
            background: #fff;
            text-align: center;
            p {
                margin: 0;
            }
        }
        .sublist {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 9.73333rem;
            margin: 0 auto;
            .s-item {
                width: 4.8rem;
                background: #fff;
                margin-bottom: 0.13333rem;
                padding-bottom: 0.13333rem;
                img {
                    display: block;
                    width: 4.02667rem;
                    height: 4.02667rem;
                    margin: 0 auto;
                }
                p {
                    margin-bottom: 0.06667rem;
                    text-indent: 1em;
                }
                :nth-child(2) {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 98%;
                }
                :nth-child(3) {
                    color: #9c3232;
                }
            }
        }
    }
    .van-goods-action {
        z-index: 9999;
    }
    .top {
        display: flex;
        padding: 0.4rem;
        .left {
            height: 2.36rem;
            width: 2.36rem;
            margin-right: 0.4rem;
            img {
                float: left;
                height: 2.36rem;
                width: 2.36rem;
            }
        }
        .right {
            flex: 1;
            display: flex;
            p {
                width: 100%;
                line-height: 0.6rem;
                text-align: left;
            }
            .r-price {
                color: #b4282d;
            }
        }
    }
    .down {
        padding: 0 0.4rem;
        height: 1.493333rem;
        p {
            text-align: left;
            margin: 0.32rem 0;
        }
        .van-stepper {
            text-align: left;
        }
    }
}
</style>